<template>
	<view class="my-index">
		<view class="header">
			<view class="userInfo pt-4 pl-4 flex align-center">
				<view class="avatar">
					<image v-if="userData.avatar" :src="showImage(userData.avatar)" mode="aspectFill" class="image"></image>
					<view v-else class="image" :style="{'backgroundColor':'#7794ff'}">
						<view class="name" v-if="userData.name">{{userData.name.slice(0,1)}}</view>
					</view>
				</view>
				<view class="ml-3 font-weight-normal h3">{{userData.name || '用户昵称'}}</view>
			</view>
			<view class="total flex justify-between mx-5 my-3 pt-3 ">
				<view class="total_item pb-3" v-for="(item,index) in totalList">
					<view v-if="index == 0" class="text-center font-weight-bold">{{userInfo?.integral|| 0}}</view>
					<view v-if="index == 1" class="text-center font-weight-bold">{{userInfo?.activitiesQty|| 0}}</view>
					<view v-if="index == 2" class="text-center font-weight-bold">{{userInfo?.activityHours || 0}}h
					</view>
					<view class="text-center font-small mt-1">{{item.text}}</view>
				</view>
			</view>
		</view>
		<view class="navigator mt-4">
			<view class="nav_item flex justify-between align-center py-3 px-5" v-for="(item,index) in navList"
				@click="navTo(item.url,index)">
				<view class="left font flex align-center justify-center">
					<view style="height: 30rpx; width: 30rpx;">
						<image :src="item.img" mode="aspectFill" class="img"></image>
					</view>
					<text class="ml-2">{{item.left}}</text>
				</view>
				<view class="rigth"><uni-icons type="right" size="20" color="#ccc"></uni-icons></view>
			</view>
		</view>
		<view class="exit mx-5">
			<!-- <view class="btn p-3">退出登录</view> -->
		</view>
		<view class="tabBar-box  fixed-bottom">
			<TabBar></TabBar>
		</view>

		<uni-popup class="popup-box" ref="popup" background-color="#fff">
			<view class="popup-content p-3">
				<view class="title text-center font-weight-bold">信息修改</view>
				<form @submit="formSubmit" @reset="formReset">

					<view class="uni-form-item uni-column mt-1">
						<view class="label form_title   font-sm">姓名</view>
						<input class="uni-input border pl-2 py-1 font-sm" name="name" placeholder="请输入"
							:value="formData.name" disabled="" />

					</view>
					<view class="flex mt-1" style="gap: 30rpx;">
						<view class="uni-form-item uni-column flex-1">

							<view class="label form_title require font-sm">生日日期</view>



							<uni-datetime-picker type="date" placeholder="请选择" name="birthday" v-model="dateTime"
								@change="DateChange" />

						</view>
						<view class="uni-form-item uni-column flex-1">
							<view class="label form_title font-sm require">性别</view>
							<uni-data-select name="sex" class="uni-input1 select border pl-2 py-1 font-sm"
								style="height: 70rpx;" v-model="sex" :localdata="sexRange"
								:clear="false"></uni-data-select>
						</view>
					</view>
					<view class="uni-form-item uni-column  mt-1">
						<view class="label form_title font-sm">部门</view>

						<input class="uni-input border pl-2 py-1 font-sm" name="department" placeholder="请输入"
							:value="formData.department" disabled />
					</view>
					<view class="uni-form-item uni-column  mt-1">
						<view class="label form_title font-sm">工号</view>
						<input class="uni-input border pl-2 py-1 font-sm" name="username" placeholder="请输入"
							:value="formData.username" disabled />
					</view>
					<view class="uni-form-item uni-column  mt-1">
						<view class="label form_title font-sm require">联系方式</view>
						<input class="uni-input1 border pl-2 py-1 font-sm" name="contactInformation" placeholder="请输入"
							:value="formData.contactInformation" />
					</view>
					<view class="uni-form-item uni-column  mt-1">
						<view class="label form_title font-sm require">健康状况</view>
						<uni-data-select class="uni-input1 border select pl-2 py-1 font-sm" style="height: 70rpx;"
							v-model="condition" :localdata="conditionRange" :clear="false"></uni-data-select>
					</view>

					<view class="uni-form-item uni-column  mt-1">
						<view class="label form_title font-sm require">专业特长</view>
						<input class="uni-input1 border pl-2 py-1 font-sm" name="speciality" placeholder="请输入"
							:value="formData.speciality" />

					</view>
					<view class="uni-btn-v">
						<button form-type="submit" class="btn font-weight-bold">提交</button>
					</view>
				</form>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import request from '../../api/index.js'
	import {
		showImage
	} from '../../api/common.js'

	import {
		getDictData,
	} from '../../common/common.js'

	import TabBar from '../../component/TabBar/TabBar.vue';


	const userInfo = ref({})

	const userData = ref({})

	const addBgColorList = ref([])
	const condition = ref('')
	const sex = ref('')
	const conditionRange = ref([])

	const sexRange = ref([{
			value: '0',
			text: "男"
		},
		{
			value: '1',
			text: "女"
		},

	])
	const dateTime = ref('')

	const popup = ref(false)
	const formData = ref({

		team: {
			organization: '',
			teamjsId: '',
		},
		name: '', //姓名
		username: '', //工号
		birthday: '2000-12-11',
		sex: '',
		department: '', //部门
		userId: '', //用户id
		contactInformation: '', //联系方式
		condition: '', //健康情况
		speciality: '' //专业特长
	})

	const totalList = ref([{
			num: 99,
			text: '总积分数'
		},
		{
			num: 22,
			text: '总活动数'
		},
		{
			num: '22h',
			text: '活动时长'
		}
	])
	const navList = ref([{
			left: '已报名的活动',
			url: '/pages/Registered/Registered',
			img: '../../static/icon/joinActivity.png'
		},
		{
			left: '已加入的组织',
			url: '/pages/JoinOrganization/JoinOrganization',
			img: '../../static/icon/jointeam.png'
		},
		{
			left: '我的爱心积分',
			url: '',
			img: '../../static/icon/love.png'
		},
		{
			left: '个人信息修改',
			url: '',
			img: '../../static/icon/infoModify.png'
		},

	])

	const requireList = ref([{
			text: '请输入生日日期',
			key: 'dateTime'
		},
		{
			text: '请输入联系方式',
			key: 'contactInformation'
		},
		{
			text: '请输入专业特长',
			key: 'speciality'
		},
		{
			text: '请选择身体状况',
			key: 'condition'
		},
		{
			text: '请选择性别',
			key: 'sex'
		},
	])


	const DateChange = (e) => {
		console.log("e---------", e);
		// dateTime.value = e
		formData.value.birthday = e
		console.log("formData.value---------", formData.value);

	}

	const getConditionRange = () => {
		conditionRange.value = getDictData('DIC003')
	}

	const navTo = (url, index) => {
		uni.navigateTo({
			url: url
		})
		if (index == 2) {

			uni.showToast({
				title: '正在开发中',
				icon: 'error'
			})
		}

		if (index == 3) {
			getConditionRange()
			getUserData()

			popup.value.open('center')
			formData.value.username = userData.value.username
			formData.value.contactInformation = userData.value.mobile

			formData.value.condition = userData.value.condition
			condition.value = userData.value.condition

			formData.value.speciality = userData.value.speciality
			dateTime.value = userData.value.birthday
			formData.value.birthday = userData.value.birthday
			console.log("userData?-----", userData.value)
			if (userData.value?.sex == '男') {
				console.log("userData?.sexuserData?.sexuserData?.sexuserData?.sex")
				sex.value = '0'
			} else if (userData.value?.sex == '女') {
				sex.value = '1'
			} else {
				sex.value = '2'
			}

			formData.value.name = userData.value.name
			formData.value.department = userData.value?.departments[0].name

		}
	}
	const getMyInfo = () => {
		request({
			url: '/api/volunteer/member-points/SelectPointByUserId',
			method: 'GET',

		}, e => {
			if (e.success) {
				console.log('e-------------', e.data.records)
				userInfo.value = e.data?.records[0]

			}
		})
	}

	const getUserData = () => {

		uni.getStorage({
			key: 'userData',
			success(e) {
				console.log("userData------------", e.data)
				userData.value = e.data
			},

		});
	}

	const fromCheck = (tip) => {
		uni.showToast({
			title: tip,
			icon: 'error'
		})

	}







	const formSubmit = (e) => {
		formData.value = e.detail.value
		formData.value.userId = userData.value.id

		formData.value.birthday = dateTime.value
		formData.value.contactInformation = formData.value.contactInformation
		formData.value.condition = condition.value



		if (sex.value == '0') {
			formData.value.sex = '男'
		} else if (sex.value == '1') {
			formData.value.sex = '女'
		} else {
			formData.value.sex = '未知'
		}


		if (!dateTime.value) {
			fromCheck(requireList.value[0].text)
			return;
		}

		if (!formData.value.contactInformation) {
			fromCheck(requireList.value[1].text)
			return;
		}

		if (!formData.value.speciality) {
			fromCheck(requireList.value[2].text)
			return;
		}

		if (!formData.value.condition) {

			fromCheck(requireList.value[3].text)
			return;
		}
		
		if (!formData.value.sex) {
		
			fromCheck(requireList.value[4].text)
			return;
		}


		console.log("====================")

		request({
			url: '/api/volunteer/teamjs-bd/UpdateTeamBdByUserId',
			method: 'POST',
			data: formData.value

		}, e => {
			if (e.success) {
				uni.showToast({
					title: '修改成功',
					icon: 'success'
				})
				getUserCurrent()

			}
		})
		popup.value.close()

	}

	const getUserCurrent = () => {
		request({
			url: '/api/sys/user/current',
			method: 'GET',

		}, e => {
			if (e.success) {

				uni.setStorage({
					key: 'userData',
					data: e.data

				})


			}
		})
	}

	onMounted(() => {

		getUserData()
		getMyInfo();
	})
</script>

<style lang="scss" scoped>
	.my-index {


		.header {
			// background-color: #ccc;
			background: no-repeat center/100% url('../../static/bg/mybg.png');
			height: 100%;
			width: 100%;

			.avatar {
				height: 120rpx;
				width: 120rpx;
				line-height: 120rpx;
				overflow: hidden;
				border-radius: 50%;


				.image {
					width: 100%;
					height: 100%;

					.name {
						font-size: 64rpx;
						text-align: center;
						color: #fff;
					}

					// background-color: pink;
				}
			}
		}

		.navigator {
			.nav_item {
				// background-color: #ccc;
				border-bottom: 1rpx solid #eee;
			}
		}

		.exit {
			margin-top: 100rpx;
			// border-radius: 30rpx;
			// overflow: hidden;

			.btn {
				text-decoration: underline;
				text-align: center;
				font-size: 32rpx;
				color: red;
			}
		}
	}

	.img {
		width: 100%;
		height: 100%;
	}



	.popup-content {
		width: 85vw;
		border-radius: 12rpx;

		.uni-input {
			background-color: #f5f5f5;
			height: 50rpx;
			border-radius: 8rpx;
		}

		.uni-input1 {
			background-color: #fff;
			height: 50rpx;
			border-radius: 8rpx;
		}

		.form_title {
			margin-bottom: 5rpx;


		}

		.require::before {
			content: '* ';
			color: #ff0212;
		}

		.select {
			padding-left: 0;
			height: 20rpx;
			box-sizing: border-box;
		}

		.btn {
			background-color: #fff;
			border: none !important;
			color: #6975ff;
		}

		.btn::after {
			// background-color: #fff;
			border: none !important;

		}


		.title {}

	}

	.uni-input-wrapper {
		.icon {
			right: 10rpx;
			top: 15rpx;
			color: #xe434;
		}
	}
</style>

<style>
	.uni-calendar__content {
		z-index: 2222 !important;
		position: absolute;
		bottom: 240rpx !important;
	}
</style>